<template>
	<view class="wrap">
		<view class="state-box">
			<view class="info">
			</view>
		</view>
		
		<view class="main-box">	
			<view class="logistics-box">
				<view class="user">
					<u--image :src="avatar" width="54px" height="54px" shape="circle"></u--image>
					<view class="info">
						<text class="username">32岁</text>
						<text class="welcome">离异</text>
					</view>
					<view class="info">
						<text class="username">160cm</text>
						<text class="welcome">高中</text>
					</view>
				</view>
				
			</view>	
			
			<view class="address-box">
				<view class="sellte">
					<view class="address-cell">
						<u--text align='left' text="常住地址:"></u--text>
						<view>重庆市</view>
					</view>
					<view class="address-cell">
						<u--text align='left' text="户籍地:"></u--text>
						<view>九龙坡区</view>
					</view>
				</view>
			</view>
				
			<view class="seq-box">
				<view class="address-cell">
					<u--text
						:bold='true'
						text="个性介绍"></u--text>
				</view>
				<view class="address-cell">
					<u--text
						size='14px'
						text="我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约"></u--text>
				</view>
			</view>
			
			<view class="seq-box">
				<view class="address-cell">
					<u--text
						:bold='true'
						text="择偶标准"></u--text>
				</view>
				<view class="address-cell">
					<u--text
						size='14px'
						text="择偶标准就是男女之间进行恋爱与组成家庭时相互选择的主观评价标准，它是人脑对于男女之间价值关系的客观价值标准的主观反映。择偶标准由众多基本要素（如财富、才华、品德、相貌等）所组成，而每一个基本要素都包含着特定的价值内涵。人将会以什么样的择偶标"></u--text>
				</view>
			</view>
			
			<view class="seq-box">
				<view class="address-cell">
					<u--text
						:bold='true'
						text="相册"></u--text>
				</view>
				<view class="photo-list">
					
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
					<view class="img-list">
						<u--image :showLoading="true" :src="src" width="100px" height="100px" @click="click"></u--image>
					</view>
				</view>
			</view>
				
			<view class="service-box">
				<u-button color='#e16b8c' text="联系ta"></u-button>
			</view>
			
			<view class="anti-collapse"></view>
		</view>
	</view>
</template>

<script>
import { orderDetail } from '@/api/uc/order.js';

export default {
	onShow() {
		uni.setNavigationBarTitle({
			title:'小美'
		})
	},
	onLoad(options) {
		// options.id = 4;
		if(options.id != undefined) {
			this.order.id = options.id;
			this.init();
		}
	},
	data() {
		return {
			avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
			src: "https://cdn.uviewui.com/uview/album/1.jpg",
			order: {
				id: 0,
				productList: []
			}
		}
	},
	methods: {
		init() {
			orderDetail(this.order.id).then(res=>{
				this.order = res.data.order;
			});
		}
	}	
}	
</script>

<style lang="less">
.photo-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 10rpx;
	
	.img-list {
		flex-direction: column;
		background: #fff;
		margin: 10rpx;
		overflow: hidden;
	}
}

	.user {
		align-items: center;
		display: flex;
		flex-direction: row;
		height: 160rpx;
		
		.info {
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			
			.username {
				font-size: 15px;
				margin: 8rpx 0;
			}
			
			.welcome {
				font-size: 11px;
				color: #acacac;
			}
		}
	}
	
.wrap {
	display: flex;
	flex-direction: column;
	background: #f4f4f4;
}
	
.main-box {
	position: relative;
	top: -40px;
}	

.state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 80px;
	background: #f4a7b9;
	color: #fff;
	
	.info {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100px;
		align-items: center;
		justify-content: center;
		
		.state {
			font-size: 18px;
			margin-bottom: 5px;
		}
		
		.tips {
			font-size: 12px;
			color: #ccc;
		}
	}
}
	
.logistics-box {
	margin: 0 24rpx;
	padding: 0 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.logistics {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1px solid #eee;
		
		.info {
			display: flex;
			flex-direction: column;
			
			.process {
				margin-bottom: 5px;
				font-size: 14px;
				color: #000;
			}
			
			.depict {
				font-size: 12px;
				color: #acacac;
			}
		}
	}
	
	.receiver {
		display: flex;
		flex-direction: column;
		padding: 24rpx 0;
		
		.contacts {
			display: flex;
			flex-direction: row;
			font-size: 14px;
			color: #000;
			margin-bottom: 5px;
			
			text {
				margin-right: 10px;
			}
		}
		
		.address {
			font-size: 12px;
			color: #999;
		}
		
	}
	
	
}
	
.address-box {
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
	
	.product-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.product {
			display: flex;
			flex-direction: row;
			
			.info {
				display: flex;
				flex-direction: column;
				margin: 0 12rpx;
			}
		}
		
		.cost {
			display: flex;
			flex-direction: column;
			text-align: right;
			
			.price {
				font-size: 12px;
			}
			
			.quantity {
				font-size: 11px;
				color: #acacac;
			}
		}
	}
	
}
	
.address-cell {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 12rpx 0;
	font-size: 13px;
	color: #3e3e3e;
	
	.img-list {
		flex-direction: column;
	}
} 	


.seq-box {
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 5px;
	background: #fff;
}

.service-box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 48rpx 24rpx;
		
	.service-btn {
		display: flex;
		flex-direction: row;
		
		.text {
			margin: 0 2px;
			color: #166bbb;
			font-size: 14px;
		}
	}	
}

.toolbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 50px;
	width: 100%;
	padding: 0 24rpx;
	border-top: 1px solid #eee;	
	box-sizing: border-box;
	
	.handler {
		display: flex;
		flex-direction: row;
		
		.btn {
			display: flex;
			width: 92px;
			height: 32px;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-left: 10px;
		}
		
		.primary-btn {
			background: #9a3333;
			color: #fff;
		}
	}
}

.anti-collapse {
	width: 100%;
	height: 60px;
}
</style>